iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0
Mobile Development

畢業專題拯救計畫系列 第 5

Flutter中的鎖和鑰匙--Forms and Validation

  • 分享至 

  • xImage
  •  

在 Flutter 中,表單是用來儲存用戶輸入的資料,例如填寫名字、選擇選項等等。驗證則是用來檢查這些輸入的資料是否正確,例如確認電子郵件地址有包含 @ 符號,或者檢查輸入的內容不可為空等等。

Form

表單通常包含一個或多個輸入框,例如 TextFormField,這些輸入框用來收集用戶的資料。為了更方便地管理整個表單,我們會使用 Form 把這些輸入框包起來,這樣就能更好地驗證整個表單的內容。

Form(
  key: _formKey,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      TextFormField(
        decoration: InputDecoration(labelText: 'Enter your name'),
      ),
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0),
        child: ElevatedButton(
          onPressed: () {
            // 按下按鈕後的操作
          },
          child: Text('Submit'),
        ),
      ),
    ],
  ),
)

Validation

驗證就像是在檢查用戶輸入的資料是不是符合規定或格式。例如在每個輸入框上加一個 Validator ,負責檢查用戶輸入的內容是否正確。如果不符合規定, Validator 會提醒用戶修改。

TextFormField(
  decoration: InputDecoration(labelText: 'Enter your name'),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
)

https://ithelp.ithome.com.tw/upload/images/20240822/20163322F9FSFc9bWn.png
提交後會長這樣
https://ithelp.ithome.com.tw/upload/images/20240822/20163322Is7UQxUArr.png

我們明天見~


上一篇
Flutter中的櫃子--layout基本概念2
下一篇
Flutter中的導航--Navigator 和 Routes
系列文
畢業專題拯救計畫22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言